<template>
  <div>
    <!--数据汇总模块-->
    <basic-container>
      <div class="title">
        <h2>数据汇总</h2>
      </div>
      <div class="dataSummarization">
        <div class="totalSales">
          <span class="iconfont statement">&#xe669;</span>
          <div class="welData">
            <div class="dataTitle">今日销售总额</div>
            <div class="number">&yen;{{obj.saleAmount}}</div>
          </div>
        </div>
        <div class="totalSales">
          <span class="iconfont statement">&#xe643;</span>
          <div class="welData">
            <div class="dataTitle">今日订单总数</div>
            <div class="number">{{obj.orderNum}}</div>
          </div>
        </div>
        <div class="totalSales">
          <span class="iconfont statement">&#xe604;</span>
          <div class="welData">
            <div class="dataTitle">新增商户</div>
            <div class="number">{{obj.newUser}}</div>
          </div>
        </div>
        <div class="totalSales">
          <span class="iconfont statement">&#xe62f;</span>
          <div class="welData">
            <div class="dataTitle">商户总数</div>
            <div class="number">{{result.buyerNum}}</div>
          </div>
        </div>
        <div class="totalSales">
          <span class="iconfont statement">&#xe635;</span>
          <div class="welData">
            <div class="dataTitle">今日采购单数</div>
            <div class="number">{{purchaseOrderNum}}</div>
          </div>
        </div>
      </div>
    </basic-container>

    <basic-container>
      <div class="title">
        <h2 class="pending">待处理事务</h2>
        <!--<div class="addOrSet">-->
        <!--<el-button type="text">添加/设置</el-button>-->
        <!--</div>-->
      </div>

      <div class="pendContent">
        <el-table :data="order" style="width: 25%;float: left;padding-right: 20px">
          <el-table-column prop="indent" label="订单" style="color: #666"></el-table-column>
          <el-table-column>
            <template slot-scope="scope">
              <div style="cursor:pointer;" @click="go_url(scope.row.url)">
                <span style="font-size: 14px">
                  (
                  <span style="color: red;">{{scope.row.quantity}}</span>)
                </span>
              </div>
            </template>
          </el-table-column>
        </el-table>
        <el-table :data="purchase" style="width: 25%;float: left;padding-right: 20px">
          <el-table-column prop="indent" label="采购" style="color: #666"></el-table-column>
          <el-table-column>
            <template slot-scope="scope">
              <div style="cursor:pointer;" @click="go_url(scope.row.url)">
                <span style="font-size: 14px">
                  (
                  <span style="color: red;">{{scope.row.quantity}}</span>)
                </span>
              </div>
            </template>
          </el-table-column>
        </el-table>
        <el-table :data="returnOrder" style="width: 25%;float: left;padding-right: 20px">
          <el-table-column prop="indent" label="退货" style="color: #666"></el-table-column>
          <el-table-column>
            <template slot-scope="scope">
              <div style="cursor:pointer;" @click="go_url(scope.row.url)">
                <span style="font-size: 14px">
                  (
                  <span style="color: red;">{{scope.row.quantity}}</span>)
                </span>
              </div>
            </template>
          </el-table-column>
        </el-table>
        <el-table :data="finance" style="width: 25%;float: left;">
          <el-table-column prop="indent" label="财务" style="color: #666"></el-table-column>
          <el-table-column>
            <template slot-scope="scope">
              <div style="cursor:pointer;" @click="go_url(scope.row.url)">
                <span style="font-size: 14px">
                  (
                  <span style="color: red;">{{scope.row.quantity}}</span>)
                </span>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </basic-container>

    <!--运营快捷入口-->
    <basic-container>
      <div class="title">
        <h2 class="pending">运营快捷入口</h2>
      </div>
      <div class="operationInlet">
        <router-link to="/orderCenter/order_purchase">
          <div class="operationList">
            <span class="iconfont inletIcon">&#xe621;</span>
            <p>订单管理</p>
          </div>
        </router-link>

        <router-link to="/orderCenter/supply_match">
          <div class="operationList">
            <span class="iconfont inletIcon">&#xe62b;</span>
            <p>订单汇总</p>
          </div>
        </router-link>

        <router-link to="/account-bill/buyer-account-bill">
          <div class="operationList">
            <span class="iconfont inletIcon">&#xe603;</span>
            <p>财务管理</p>
          </div>
        </router-link>

        <router-link to="/bi-total/dashboard">
          <div class="operationList">
            <span class="iconfont inletIcon">&#xe669;</span>
            <p>报表管理</p>
          </div>
        </router-link>

        <router-link to="/goods/addGoods">
          <div class="operationList">
            <span class="iconfont inletIcon">&#xe675;</span>
            <p>新增商品</p>
          </div>
        </router-link>

        <!--<router-link to='/goods/addGoods'>-->
        <div class="operationList">
          <span class="iconfont inletIcon">&#xe635;</span>
          <p>市场行情</p>
        </div>
        <!--</router-link>-->

        <router-link to="/orderCenter/customer_order">
          <div class="operationList">
            <span class="iconfont inletIcon">&#xe613;</span>
            <p>代客下单</p>
          </div>
        </router-link>

        <!--<router-link to='/orderCenter/customer_order'>-->
        <div class="operationList">
          <span class="iconfont inletIcon">&#xe61b;</span>
          <p>采购退货管理</p>
        </div>
        <!--</router-link>-->

        <router-link to="/goods-manage/goodsList">
          <div class="operationList">
            <span class="iconfont inletIcon">&#xe63b;</span>
            <p>商品列表</p>
          </div>
        </router-link>
      </div>
    </basic-container>
  </div>
</template>

<script>
import {
  queryPurchaseOrder,
  countPurchaseOrder
} from "@/api/purchase/purchaseorder";
import { countAccount } from "@/api/opc/buyerpayment";
import { countBuyOrder } from "@/api/saleb/buyorder";
import { countPayAccount } from "@/api/opc/supplierpayment";
import Request from "./request";
import { getStore } from "@/util/store";
import Util from "@/util/pds/utils";

let util = new Util();
export default {
  name: "wel",
  data() {
    return {
      request: new Request(),
      purchaseOrderNum: "0",
      page: {
        total: 0, // 总页数
        currentPage: 1, // 当前页数
        pageSize: 20 // 每页显示多少条
      },
      //今日数据
      obj: {
        orderNum: 0,
        saleAmount: 0.0,
        refundAmount: 0.0,
        newUser: 0,
        buyerNum: 0
      },
      //总数据
      result: {
        orderNum: 0,
        saleAmount: 0.0,
        refundAmount: 0.0,
        newUser: 0,
        buyerNum: 0
      },
      order: [
        {
          indent: "待发货",
          quantity: "0",
          url: "/orderCenter/order_supply"
        },
        {
          indent: "待收货",
          quantity: "0",
          url: "/orderCenter/order_supply"
        }
      ],
      purchase: [
        {
          indent: "待审核",
          quantity: "0",
          url: "/orderCenter/order_purchase"
        },
        {
          indent: "待采购",
          quantity: "0",
          url: "/orderCenter/order_purchase"
        }
      ],
      returnOrder: [
        {
          indent: "待审核退款申请",
          quantity: "0",
          url: "/orderCenter/return_order"
        },
        {
          indent: "待退货",
          quantity: "0",
          url: "/orderCenter/return_order"
        }
      ],
      finance: [
        {
          indent: "待结算应收帐单",
          quantity: "0",
          url: "/account-bill/buyer-account-bill"
        },
        {
          indent: "待结算应付帐单",
          quantity: "0",
          url: "/account-bill//funds/supplier"
        }
      ],
      pmId: getStore({ name: "pmId" })
    };
  },
  created() {
    this.pmId = getStore({ name: "pmId" });
  },
  mounted() {
    this.getOverView();
    this.getSummary();
    this.getCount();
  },
  methods: {
    go_url(url) {
      console.log(url);
      this.$router.push({ path: url });
    },
    //查询今日数据
    getOverView() {
      let params = {
        startTime: util.getDateTime(0),
        endTime: util.getDateTime(1)
      };
      this.request
        .overview(params)
        .then(res => {
          if (res.code === 200) {
            this.obj = res.ext;
          } else {
            this.$message.warning(res.msg);
          }
        })
        .catch(err => {
          this.$message.warning(err);
        });

      //查询今日采购单数
      let param = {
        startTime: util.getDateTime(0),
        endTime: util.getDateTime(1),
        pmId: this.pmId
      };
      queryPurchaseOrder(param).then(res => {
        // console.log("res",res.data.data);
        this.purchaseOrderNum = res.data.data;
      });
    },
    //查询总数据
    getSummary() {
      this.request
        .overview()
        .then(res => {
          if (res.code === 200) {
            this.result = res.ext;
          } else {
            this.$message.warning(res.msg);
          }
        })
        .catch(err => {
          this.$message.warning(err);
        });
    },
    getCount() {
      //根据采购单状态查询采购单数
      countPurchaseOrder({
        pmId: this.pmId,
        purchaseStatus: "2"
      }).then(res => {
        //待审核
        this.purchase[0].quantity = res.data.data;
      });
      countPurchaseOrder({
        pmId: this.pmId,
        purchaseStatus: "3"
      }).then(res => {
        //待采购
        this.purchase[1].quantity = res.data.data;
      });
      //财务
      countAccount({
        pmId: this.pmId,
        status: "0"
      }).then(res => {
        //待结算应收帐单
        this.finance[0].quantity = res.data.data;
      });
      //待结算应付帐单
      countPayAccount({
        pmId: this.pmId,
        status: "0"
      }).then(res => {
        this.finance[1].quantity = res.data.data;
      });
      //订单
      countBuyOrder({
        pmId: this.pmId,
        status: "5"
      }).then(res => {
        //待发货
        this.order[0].quantity = res.data.data;
      });
      countBuyOrder({
        pmId: this.pmId,
        status: "6"
      }).then(res => {
        //待收货
        this.order[1].quantity = res.data.data;
      });
    },
    orderManage() {
      this.$router.push({ path: "@/pds/order/order/index.vue" });
    }
  }
};
</script>

<style scoped="scoped" lang="scss">
@import "./iconFont/iconfont.css";

.title {
  position: relative;
  width: 100%;
  margin-bottom: 20px;
  margin-left: 10px;
}

.dataSummarization {
  display: flex;
  .totalSales {
    position: relative;
    flex: 1;
    margin: 0 20px;
    height: 100px;
    &:nth-of-type(1) {
      background-color: #0067a6;
    }
    &:nth-of-type(2) {
      background-color: #00abd8;
    }
    &:nth-of-type(3) {
      background-color: #008972;
    }
    &:nth-of-type(4) {
      background-color: #efc028;
    }
    &:nth-of-type(5) {
      background-color: #f1572d;
    }
    span {
      display: block;
      float: left;
      margin-left: 40px;
      margin-top: 20px;
    }
    .welData {
      float: left;
      margin-left: 40px;
      margin-top: 20px;
      color: #fff;
      .dataTitle {
        text-align: right;
        position: absolute;
        font-size: 14px;
        width: 60%;
        white-space: nowrap;
        right: 15px;
      }
      .number {
        position: absolute;
        bottom: 15px;
        right: 15px;
        font-size: 30px;
        font-weight: 700;
        width: 60%;
        text-align: right;
      }
    }
  }
}

.pendContent {
  margin-bottom: 20px;
  &:after {
    display: block;
    clear: both;
    content: "";
    visibility: hidden;
    height: 0;
  }
}

/*运营快捷入口*/
.operationInlet {
  width: 100%;
  &:after {
    content: "";
    display: block;
    height: 0;
    overflow: hidden;
    clear: both;
  }
  .operationList {
    width: 11%;
    height: 180px;
    float: left;
    text-align: center;
    &:hover {
      background: #eee;
      color: #44bf3e;
    }
    .inletIcon {
      display: inline-block;
      padding-top: 40px;
      padding-bottom: 20px;
      color: #999;
      font-size: 48px;
    }
    p {
      text-align: center;
    }
  }
}

.addOrSet {
  position: absolute;
  right: 30px;
  top: 0px;
  bottom: 0;
  margin: auto;
}

//定义字体图标样式
.iconfont {
  font-family: "iconfont" !important;
  font-size: 48px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.statement {
  color: #fff;
  font-size: 48px;
}
</style>
